import React,{useState} from 'react'
import VisitPage from './components/VisitPage'
import ExpSuccess from './components/ExpSuccess'
import '../../../assets/styles/mineHistory.less'
export default function MineHistory() {
    const [menuList,setMenuList]=useState([
        {name:'访问记录',id:1,state:'his_active'},
        {name:'成功实验',id:2,state:''},
    ])
    //切换访问页面
    let [page,setPage]=useState('访问记录')
    //给左边的切换按钮添加样式
    function changeState(name){
        // console.log(name);
        page=name
        setPage(page)
        //先清除所有的样式
        menuList.forEach(item=>item.state='')
        //点击的按钮添加样式
        for (const ele of menuList) {
            if(ele.name==name){
                ele.state='his_active'
                break;
            }
        }
        setMenuList([...menuList])
    }
    return (
        <div className='historyBox'>
            <div className='historyContent'>
                <div className='leftBox'>
                    {menuList.map(item=>{
                       return <div onClick={()=>changeState(item.name)} key={item.id} className={'leftItem'+' '+item.state}>{item.name}</div>
                    })}
                </div>
                <div className='rightBox'>
                    {page=='访问记录'&&<VisitPage />}
                    {page=='成功实验'&&<ExpSuccess/>}
                </div>
            </div>
        </div>

    )
}
